<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import '../assets/styles/common/lib-mixins.less';
@import '../assets/styles/common/common.less';

html, body{
  background-color: #F6F6F6;
}
.container{
  position: relative;
  padding: 30px 0 0;
  background-color: #F6F6F6;
}

.device-head{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 184px;
  background-color: #FFDA44;
}
.device-wrap{
  position: relative;
  z-index: 10;
  margin: 0 20px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 40px;
}
.device-tit{
  height: 90px;
  padding: 0 40px 0 16px;
  box-sizing: border-box;
  .px2px(font-size, 26PX);
  border-bottom: 1PX solid #CECECE;
  .flex-row-start;
}

.device-desc{
  position: relative;
  color: #000;
  .px2px(font-size, 30PX);
  height: 100px;
  border-bottom: 1PX solid #CECECE;
  .flex-base();

  .device-status{
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    .px2px(font-size, 26PX);

    &.on-line{
      color: #84d945;
    }

    &.un-line{
      color: #ddd;
    }
  }
}

.device-label{
  color: #8b8b8b;
  .px2px(font-size, 26PX);
  height: 90px;
  border-bottom: 1PX solid #CECECE;
  .flex-row-start;

  label{
    margin: 0 57px 0 16px;
    color: #000;
  }
}
.device-list{
  list-style: none;
  padding: 20px 0 20px;
  box-sizing: border-box;
  .flex-base(@flex-flow: row wrap; @justify-content: flex-start;);

  li{
    width: 22%;
    padding: 10px 0;
    margin: 20px 0 0 15px;
    background-color: #fff;
    border: 4PX solid transparent;
    box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    .flex-column-start;

    &.use-active{
      color: #ddd;
      background-color: #f3f3f3;
    }

    &.chos-active{
      background-color: #D2FFFB;
      border: 4PX solid #508AF6;
    }

    .dev-number{
      text-align: center;
      .px2px(font-size, 30PX);
    }

    .can-use{
      margin-top: 10px;
      width: 58px;
      height: 57px;
      background-image: url(../assets/images/icons/can-use.png);
    }

    .cant-use{
      margin-top: 10px;
      width: 58px;
      height: 57px;
      background-image: url(../assets/images/icons/can-use2.png);
    }

    .dev-status{
      margin-top: 10px;
      .px2px(font-size, 28PX);
    }
  }
}

.device-tips{
  margin: 30px 40px 0;
  padding: 20px 10px;
  .px2px(font-size, 24PX);
  color: #fff;
  background-color: #ACB3B9;
  border-radius: 5px;
}

.sure-btn{
  margin: 30px;
  height: 88px;
  line-height: 88px;
  text-align: center;
  .px2px(font-size, 28PX);
  border-radius: 5px;
  color: #fff;
  background-color: #ddd;
  border-radius: 9999px;

  &.active{
    background-color: #FFDA44;
    color: #000;
  }
}
</style>
<template>
  <div class="container">
    <div class="device-head"></div>
    <div class="device-wrap">
      <div class="device-desc">
        <p>{{deviceInfo.communityName}}</p>
        <p v-if="deviceInfo.onlineState.code === 11" class="device-status on-line">在线</p>
        <p v-if="deviceInfo.onlineState.code === 10" class="device-status un-line">离线</p>
      </div>
      <div class="device-label">
        <label>设备号</label>
        <p>{{deviceInfo.imei}}</p>
      </div>
      <p class="device-tit">请选择充电端口</p>
      <ul class="device-list">
        <template v-for="(item, index) of deviceInfo.ports">
          <li  :key="index" :class="{'use-active': item.state === 'USEING', 'chos-active': chosIndex === index}" @click="chosDevice(item, index)">
            <p class="dev-number">{{item.no}}号插座</p>
            <i class="bw-ico" :class="{'can-use': item.state === 'FREE', 'cant-use': item.state === 'USEING'}"></i>
            <p class="dev-status" v-if="item.state === 'FREE'">空闲</p>
            <p class="dev-status" v-if="item.state === 'USEING'">占用</p>
          </li>
        </template>
      </ul>
    </div>
    
    <p class="device-tips">说明： 使用过程中，负载过大引起的意外中断、插座被人拔出等情况，使用剩余金额不予退还。</p>
    <div class="sure-btn" :class="{'active': isChos}" @click="goPay">下一步</div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import BW from '../assets/scripts/common/bwCommon'
// import urls from '.././assets/scripts/common/apiUrls'
export default {
  components: {
  },
  data() {
    return {
      pageQuery: null,    // 页面参数
      chosIndex: '',    // 选择索引
      isChos: false,    // 是否已经选择一个
      deviceInfo: null     // 设备数据对象
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(['getAppId', 'getUsrInfo'])
  },
  async mounted() {
    this.pageQuery = BW.getRequest()
    // if (typeof (this.pageQuery.state) === 'undefined') {
    //   let codeUrl = encodeURIComponent(location.href)
    //   window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.getAppId + '&redirect_uri=' + codeUrl + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
    //   return
    // }
    // let resOpen = await this.request('reqOpenId', {code: this.pageQuery.code}, 'get')
    // this.setOpenId(resOpen.data.openId)
    // let usrInfo = this.getUsrInfo
    // if (usrInfo === null || typeof (usrInfo) === 'undefined') {
    //   usrInfo = {registed: resOpen.data.registed}
    // } else {
    //   usrInfo.registed = resOpen.data.registed
    // }
    // this.setUsrInfo(usrInfo)
    let res = await this.request('reqDeviceList', {imei: this.$route.query.imei}, 'get')
    // let res = await this.request('reqDeviceList', {imei: 866289033828379}, 'get')
    this.$store.commit('updateLoadingStatus', false)
    console.log(res.data)
    this.deviceInfo = res.data
  },
  methods: {
    ...mapMutations(['setOpenId', 'setUsrInfo']),
    initDevice() {
      this.deviceInfo.ports.forEach((item, index) => {
        item.isChos = false
        this.deviceInfo.ports.splice(index, 1, item)
      })
    },
    chosDevice(item, index) {
      if (item.state !== 'FREE') return
      this.chosIndex = index
      this.isChos = true
    },
    goPay() {
      // this.$router.push({path: 'pay', query: {device: this.deviceInfo.ports[this.chosIndex].no, mname: this.deviceInfo.merchantName, state: this.deviceInfo.onlineState, imei: this.$route.query.imei}})
      this.$router.push({path: 'pay', query: {device: this.deviceInfo.ports[this.chosIndex].no, mname: this.deviceInfo.communityName, state: this.deviceInfo.onlineState.code, imei: this.$route.query.imei}})
    }
  }
}
</script>
